<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <script src="../../lib/angularjs/angular.min.js"></script>
</head>
<body>
    <div ng-app="app01">
        <div ng-controller="ctrl01">
            <b>转换成之前：</b>{{name }}<br/>
            <b>转换成大写：</b>{{name | uppercase}}<br/>
            <b>转换成小写：</b>{{name1}}<br/>
            <b>显示两个小数：</b>{{2304.23402842|number:2}}<br/>
            <b>货币过滤器：</b>{{230801403852.23408203 | currency}}<br/>
            <h2>Date</h2>
            <b>日期medium：</b>{{ today | date:'medium' }}<br/>
            <b>日期short：</b>{{today | date:'short'}}<br/>
            <b>日期fullDate：</b>{{today | date:'fullDate'}}<br/>
            <b>日期longDate：</b>{{today|date:'longDate'}}<br/>
            <b>日期mediumDate：</b>{{ today | date:'mediumDate' }}<br/>
            <b>日期shortDate：</b>{{ today | date:'shortDate' }} <br/>
            <b>日期mediumTime：</b>{{ today | date:'mediumTime' }}<br/>
            <b>日期shortTime：</b>{{ today | date:'shortTime' }} <br/>
            四位年份： {{ today | date:'yyyy' }} <!-- 2013 --><br/>
            两位年份： {{ today | date:'yy' }} <!-- 13 --><br/>
            一位年份： {{ today | date:'y' }} <!-- 2013 --><br/>
             月份格式化
            英文月份： {{ today | date:'MMMM' }} <!-- August --><br/>
            英文月份简写： {{ today | date:'MMM' }} <!-- Aug --><br/>
            数字月份： {{ today |date:'MM' }} <!-- 08 --><br/>
            一年中的第几个月份： {{ today |date:'M' }} <!-- 8 --><br/>
             日期格式化
            数字日期： {{ today|date:'dd' }} <!-- 09 --><br/>
            一个月中的第几天： {{ today | date:'d' }} <!-- 9 --><br/>
            英文星期： {{ today | date:'EEEE' }} <!-- Thursday --><br/>
            英文星期简写： {{ today | date:'EEE' }} <!-- Thu --><br/>
             小时格式化
            24小时制数字小时： {{today|date:'HH'}} <!--00--><br/>
            一天中的第几个小时： {{today|date:'H'}} <!--0--><br/>
            12小时制数字小时： {{today|date:'hh'}} <!--12--><br/>
            上午或下午的第几个小时： {{today|date:'h'}} <!--12--><br/>
             分钟格式化
            数字分钟数： {{ today | date:'mm' }} <!-- 09 --><br/>
            一个小时中的第几分钟： {{ today | date:'m' }} <!-- 9 --><br/>
             秒数格式化
            数字秒数： {{ today | date:'ss' }} <!-- 02 --><br/>
            一分钟内的第几秒： {{ today | date:'s' }} <!-- 2 --><br/>
            毫秒数： {{ today | date:'.sss' }} <!-- .995 --><br/>
             字符格式化
            上下午标识： {{ today | date:'a' }} <!-- AM --><br/>
            四位时区标识： {{ today | date:'Z' }} <!--- 0700 --><br/>
            下面是一些自定义日期格式的示例：
            {{ today | date:'MMMd, y' }} <!-- Aug9, 2013 --><br/>
            {{ today | date:'EEEE, d, M' }} <!-- Thursday, 9, 8--><br/>
            {{ today | date:'hh:mm:ss.sss' }} <!-- 12:09:02.995 --><br/>
            <h2>Filter</h2>
            <b>数组过滤前</b>{{arrays}}<br/>
            <b>数组过滤含【e】</b>{{arrays|filter:'e'}}<br/><br/>
            <b>对象过滤前</b>{{people}}<br/>
            <b>对象过滤含【e】</b>{{ people | filter:{name:'e'} }}<br/><br/>
            <h2>自定义方法过滤</h2>
            <b>数组过滤前：</b>{{arrays}}<br/>
            <b>数组元素首字母是否大写：</b>{{ arrays | filter:isCapitalized }}
            <h2>严格比较angular.equals({{expected}}, {{actual}}):{{eq}}</h2>
            <h2>将JSON或对象转换成字符串{{ {'name': 'Ari', 'City': 'SanFrancisco'} | json }}</h2>
            <h2>limitTo：字符串或数组截取</h2>
            <b>字符串：</b>{{ '2340801230skdfjwejfls' | limitTo:3 }}<br/>
            <b>数组：</b>{{ ['23','234isd','23ld','sd'] | limitTo:3 }}<br/>
            <h2>排序：orderBy</h2>
            <b>根据用户名排序之前：</b>{{ orderUsers  }}<br/>
            <b>根据用户名排序之后：</b>{{ orderUsers | orderBy:"name" }}<br/>
            <b>根据用户名排序反序：</b>{{ orderUsers | orderBy:"name":true}}<br/><br/>
            <b>orderStrs:</b>{{orderStrs}}
            <ul>
                <li ng-repeat="str in orderStrs track by $index | orderBy: str" >{{str}}</li>
            </ul>

        </div>
    </div>
    <script>
        angular.module("app01",[]).controller("ctrl01",function ($scope,$filter,$interval) {
            /** 转换大小写操作 **/
            $interval(function () {
                var alphabets=randomAlphabets(20);
                $scope.name=alphabets;
                $scope.name1=$filter('lowercase')($scope.name);
            },3000);
            /** 日期 **/
            $interval(function () {
                $scope.today=new Date();
            },1000);
            /** 数组过滤 **/
            $interval(function () {
                var len=8;
                $scope.arrays=[randomAlphabets(len),randomAlphabets(len),randomAlphabets(len),randomAlphabets(len)];
            },5000);
            /** 对象过滤 **/
            $interval(function () {
                var len=3;
                $scope.people=[{name:randomAlphabets(len)},{name:randomAlphabets(len)},{name:randomAlphabets(len)},{name:randomAlphabets(len)}];
            },5000);
            /** 自定义方法过滤 **/
            $scope.isCapitalized=function (str) {
                return str[0]==str[0].toUpperCase();
            }
            $scope.eq=angular.equals('a','a');
            /** 严格比较 **/
            $interval(function () {
                $scope.expected=randomAlphabets(1);
                $scope.actual=randomAlphabets(1);
                $scope.eq=angular.equals($scope.expected,$scope.actual);
            },2000)

            /**　排序　**/
            $scope.orderUsers=[{"name":"230"},{"name":"w2"},{"name":"1w2"}];
            $scope.orderStrs=['sdo2','s2os','s2os','20se','2ose'];
            /** 随机生成一串字母  **/
            function randomAlphabets(len) {
                var alphabets=[];
                while(alphabets.length<len){
                    var alphabet=Math.round(Math.random()*121);
                    if((alphabet>=64&&alphabet<=89)||alphabet>=96&&alphabet<=121){
                        alphabets.push(String.fromCharCode(parseInt(alphabet))+" ");
                    }
                }
                return alphabets.join("");
            }
        });
    </script>
</body>
</html>